
import { ToolsView } from '@antv/x6'
const ToolItem = ToolsView.ToolItem
import CustomButton from "./CustomButton.vue";

import { createApp, h } from 'vue'

export class VueToolItem extends ToolItem {
    // Vue 应用实例引用
    vueApp = null

    onRender() {
        super.onRender()

        // 创建容器元素
        const container = document.createElement('div')
        container.className = 'vue-tool-container'
        this.container.appendChild(container)

        // 创建 Vue 应用
        this.vueApp = createApp({
            render: () => h(this.options.component, {
                ...this.options.props,
                onToolEvent: this.handleVueEvent.bind(this)
            })
        })

        // 挂载 Vue 应用到容器
        this.vueApp.mount(container)
    }

    // 处理 Vue 组件发出的事件
    handleVueEvent(eventName, payload) {
        const handler = this.options[`on${eventName}`]
        if (handler) {
            handler({
                tool: this,
                cell: this.cell,
                view: this.view,
                graph: this.graph,
                ...payload
            })
        }
    }

    // 清理 Vue 应用
    onRemove() {
        if (this.vueApp) {
            this.vueApp.unmount()
            this.vueApp = null
        }
        super.onRemove()
    }
}

// 注册工具类
VueToolItem.config({
    name: 'vue-tool',
    tagName: 'div',
    isSVGElement: false
})